<template>
    <div class="common-layout">
        <div v-if="loading">正在登录</div>
        <el-container v-else>
            <el-header>
                <el-row
                class="row"
                type="flex"
                justify="space-between"
                align="middle"
            >
                <el-col span="{2}">
                    <h1>学生管理系统</h1>
                </el-col>
                <el-col span="{2}">
                    <div>
                        <span>{{user.username}}</span>
                    <el-button :icon="Notebook" size="large" circle @click="handleLogout" />
                    </div>
                </el-col>
            </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">

                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    :router="true" text-color="#fff">
                        
                        <el-menu-item index="/manage/student">
                            <el-icon><icon-menu /></el-icon>
                            <span>学生管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/class">
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>班级管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/teacher">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>老师管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Notebook
} from '@element-plus/icons-vue'
import { onMounted ,ref} from 'vue';
import {useRouter,onBeforeRouteUpdate} from 'vue-router';
import { getUser } from '../services/user';
const user = ref({});
const loading = ref(true);
const router = useRouter();

onMounted(async () => {
    const {data} = await getUser();
    user.value = data;
    loading.value = false;
});
function handleLogout(){
    localStorage.clear("token");
    router.push("/login");
}
</script>
<style>
.common-layout{
    height:100%;
}
h1 {
    margin: 0;
}
.row {
    height: 60px;
}
.el-header {
    background-color: #001529;
    color: white;
}

</style>